<script setup lang="ts">
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
const rootHeight = ref("100%");
const tableData = ref([
  {
    date: "2016-05-03",
    name: "TomTomTomTomTomTomTomTomTomTomTomTomTomTomTomTomTomTomTomTom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "1",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    address1: "No. 189, Grove St, Los Angeles",
    address2: "No. 189, Grove St, Los Angeles",
    address3: "No. 189, Grove St, Los Angeles",
    address4: "No. 189, Grove St, Los Angeles",
    address5: "0",
  },
]);
//--------------------------------------------------------------------------------------
// 标记当前选中的数据位置
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1);
};
//--------------------------------------------------------------------------------------
onMounted(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  window.addEventListener("resize", resizeListener);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});
onUpdated(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[onUpdated]----" + rootHeight.value);
});
function resizeListener() {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[resizeListener]----" + rootHeight.value);
}
//-------------------------------------------
interface TableValue {
  date: string;
  name: string;
  address: string;
  address1: string;
  address2: string;
  address3: string;
  address4: string;
  address5: string;
}
function formatter(row: TableValue) {
  const value = row.address5;
  return value == "1" ? "平台" : "学校";
}
// 修改 table header cell的背景色
function tableHeaderCellStyle(rowIndex: number, columnIndex: number) {
  if (rowIndex === 0) {
    //第一行（表头）
    //第一列和第二列，背景颜色改为pink
    if (columnIndex == 1 || columnIndex == 2) {
      return { background: "pink !important" };
    }
    //第五列，背景颜色改为blue，字体颜色改为black
    else if (columnIndex == 5) {
      return { background: "blue !important", color: "black !important" };
    }
    //第5-21列，背景颜色改为blue
    else if (columnIndex >= 5 && columnIndex <= 21) {
      return { background: "blue !important" };
    }
  }
}
</script>
<template>
  <div class="style-root" :style="{ height: rootHeight }">
    <!-- 
    show-overflow-tooltip :
    
    -->
    <!-- Table 在超出宽度时，本身自带左右滑动 
    超出高度时，也恶意上下滑动-->
    <!-- :header-row-style="{ 'text-align': 'center', background: '#3264ff' }" 背景生效，但文字对其未生效 
       <el-table :header-cell-style="tableHeaderCellStyle">
-->
    <el-table
      :data="tableData"
      :border="true"
      :header-cell-style="{
        background: '#ff69b4',
        color: '#333333',
        textAlign: 'center',
      }"
      style="width: 100%"
    >
      <el-table-column fixed prop="date" label="Date" width="180" />
      <el-table-column
        prop="name"
        label="show-overflow-tooltip"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column prop="address" label="Address" :resizable="false" />
      <el-table-column prop="address1" label="Address1" />
      <el-table-column prop="address2" label="Address2" />
      <el-table-column prop="address3" label="Address3" />
      <el-table-column prop="address4" label="Address4" />
      // 根据对应的值，显示特定的文字/字符串
      <el-table-column
        prop="address5"
        label="Address5"
        :formatter="formatter"
      />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            Remove
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.style-root {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.style-table-header {
  width: 100%;
  align-items: center;
  text-align: center;
  background-color: darkgray;
}
.style-parent-menu {
  width: 100%;
  height: 48px;
  background-color: azure;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-parent-menu-sel {
  width: 100%;
  height: 48px;
  background-color: coral;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-child-menu {
  width: 100%;
  height: 48px;
  background-color: lightblue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-child-menu-sel {
  width: 100%;
  height: 48px;
  background-color: lawngreen;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-div-menu {
  width: 100%;
  height: 1px;
  background-color: #efefef;
}
</style>
